<template>
	<div>
		<div class="nav-bar">
			<van-nav-bar fixed
									 z-index="9"
									 title="商品列表" />
		</div>
		<div class="category-list">
			<van-row>
				<van-col>
					<div class="cate-side-bar">
						<van-sidebar v-model="cateIndex">
							<van-sidebar-item v-for="(item, index) in cateList"
																:key="index"
																@click="onClickCate(index, item.ID)"
																:title="item.MALL_CATEGORY_NAME"></van-sidebar-item>
						</van-sidebar>
					</div>
				</van-col>
				<van-col span="18">
					<div class="sub-cate-tab">
						<van-tabs v-model="active"
											@click="onClickSubCate"
											color="#e61382"
											title-active-color="#e61382">
							<van-tab v-for="(item, index) in subCateList"
											 :key="index"
											 :title="item.MALL_SUB_NAME"></van-tab>
						</van-tabs>
					</div>
					<div class="good-list">
						<van-pull-refresh v-model="isRefresh"
															@refresh="onRefresh">
							<van-list v-model="loading"
												:finished="finished"
												@load="onLoad">
								<div class="good-list-item"
										 @click="goGoodInfo(item.ID)"
										 v-for="(item,index) in goodList"
										 :key="index">
									<div class="list-item-img">
										<img :src="item.IMAGE1"
												 width="100%"
												 :onerror="errorImg" />
									</div>
									<div class="list-item-text">
										<div>{{ item.NAME }}</div>
										<div class="">￥{{ item.ORI_PRICE | moneyFilter }}</div>
									</div>
								</div>
							</van-list>
						</van-pull-refresh>
					</div>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
import url from '@/serviceAPI.config.js'

import { toMoney } from '@/filter'

export default {
	name: 'CateList',
	data() {
		return {
			// 商品大类
			cateList: [],
			// 选中的大类索引
			cateIndex: 0,
			// 商品小类
			subCateList: [],
			// 选中的小类索引
			active: 0,
			// 上拉加载标志位
			loading: false,
			// 上拉加载结束
			finished: false,
			// 下拉刷新标志位
			isRefresh: false,
			// 页数
			page: 1,
			// 商品列表
			goodList: [],
			// 商品小类id
			subCateId: '',
			// 加载失败补充图片
			errorImg: 'this.src="' + require('@/assets/image/errorImg.png') + '"'
		}
	},
	methods: {
		getCateList() {
			this.$axios({
				url: url.getCateList,
				method: 'get'
			})
				.then(value => {
					if (value.data.code === 200 && value.data.message) {
						this.cateList = value.data.message
						// console.log('cateList', this.cateList)

						this.getSubCateListByCateId(this.cateList[0].ID)
					} else {
						this.$toast.fail('服务器错误，获取商品列表失败！')
					}
				})
				.catch(error => {
					console.log(error)
				})
		},
		getSubCateListByCateId(cateId) {
			this.$axios({
				url: url.getSubCateListByCateId,
				method: 'post',
				data: {
					cateId: cateId
				}
			})
				.then(value => {
					if (value.data.code === 200 && value.data.message) {
						this.subCateList = value.data.message
						// console.log('subCateList', this.subCateList)
						this.active = 0
						this.subCateId = this.subCateList[0].ID
						this.onLoad()
					} else {
						this.$toast.fail('服务器错误，获取商品列表失败！')
					}
				})
				.catch(error => {
					console.log(error)
				})
		},
		onClickCate(index, cateId) {
			this.cateIndex = index
			this.page = 1
			this.finished = false
			this.goodList = []
			this.getSubCateListByCateId(cateId)
			this.onClickSubCate(0)
		},
		onLoad() {
			setTimeout(() => {
				this.subCateId = this.subCateId
					? this.subCateId
					: this.subCateList[0].ID

				// console.log(this.subCateId)
				this.getGoodList()
			}, 1000)
		},
		onRefresh() {
			setTimeout(() => {
				this.isRefresh = false
				this.finished = false
				this.goodList = []
				this.page = 1
				this.onLoad()
			}, 500)
		},
		getGoodList() {
			this.$axios({
				url: url.getGoodListBySubCateId,
				method: 'post',
				data: {
					subCateId: this.subCateId,
					page: this.page
				}
			})
				.then(value => {
					if (value.data.code === 200 && value.data.message.length) {
						this.page++
						this.goodList = this.goodList.concat(value.data.message)
					} else {
						this.finished = true
					}

					this.loading = false
				})
				.catch(error => {
					console.log(error)
				})
		},
		onClickSubCate(index, title) {
			// console.log('index', index)
			this.subCateId = this.subCateList[index].ID
			this.goodList = []
			this.finished = false
			this.page = 1
			this.onLoad()
		},
		goGoodInfo(id) {
			this.$router.push({
				name: 'Good',
				params: {
					goodId: id
				}
			})
		}
	},
	created() {
		this.getCateList()
	},
	mounted() {
		const rem = parseInt(
				window.getComputedStyle(document.documentElement).fontSize
			),
			winHeight = document.documentElement.clientHeight

		document.getElementsByClassName('cate-side-bar')[0].style.height =
			winHeight - 4.4 * rem - 50 + 'px'

		document.getElementsByClassName('good-list')[0].style.height =
			winHeight - 90 - 50 + 'px'
	},
	filters: {
		moneyFilter(money) {
			return toMoney(money)
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-bar {
	::v-deep .van-nav-bar__content {
		background-color: #e61382;
		height: 2.2rem;
		line-height: 2.2rem;

		.van-nav-bar__title {
			color: #fff;
			font-size: 1.1rem;
		}

		.van-nav-bar__text,
		.van-icon {
			font-size: 0.9rem;
			color: #fff;
		}
	}
}

.cate-side-bar {
	background-color: #eee;
	padding-top: 2rem;

	.van-sidebar-item {
		background-color: #eee;
	}

	::v-deep .van-sidebar-item--select {
		background-color: #fff;

		&::before {
			background-color: #e61382;
		}

		.van-sidebar-item__text {
			color: #e61382;
		}
	}
}

.category-list {
	margin-top: 2.2rem;

	.left-nav ul li {
		line-height: 2rem;
		border-bottom: 1px solid #e4e7ed;
		padding: 3px;
		font-size: 0.8rem;
		text-align: center;
	}

	.good-list {
		overflow: scroll;

		.good-list-item {
			display: flex;
			flex-direction: row;
			font-size: 0.8rem;
			text-align: center;
			line-height: 25px;
			border-bottom: 1px solid #f0f0f0;
			background-color: #fff;

			.list-item-img {
				flex: 8;
				text-align: center;
				padding: 5px;

				img {
					width: 90%;
				}
			}

			.list-item-text {
				flex: 16;
				margin-top: 10px;
				margin-left: 10px;
			}
		}
	}
}

.category-active {
	background-color: #fff;
}
</style>
